<template>
    <div class="class-detail-container">
        <el-breadcrumb separator="/" class="header">
            <el-breadcrumb-item :to="{ path: '/jiaoxue/class' }">班级管理</el-breadcrumb-item>
            <el-breadcrumb-item>班级详情</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 班级信息 -->
        <div class="class-info">
            <h3>班级信息</h3>
            <table class="class-info-table">
                <tbody>
                    <tr>
                        <th>班级名称</th>
                        <td class="class-name">{{ classInfo.className }}</td>

                        <th>带班老师</th>
                        <td class="teacher-name">{{ classInfo.teacherName }}</td>

                        <th>开班时间</th>
                        <td class="date-display">{{ classInfo.startTime }}</td>

                        <th>班级状态</th>
                        <td class="status-learning">{{ classInfo.classStatus }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 搜索区域 -->
        <div class="search-area">
            <el-form :model="searchParams" class="search-row" inline>
                <el-form-item label="学生名" class="search-item">
                    <el-input v-model="searchParams.name" placeholder="请输入学生姓名" clearable />
                </el-form-item>
                <el-form-item label="工作状态" class="search-item">
                    <el-select v-model="searchParams.state" placeholder="请选择工作状态" clearable>
                        <el-option label="报名" value="报名"></el-option>
                        <el-option label="学习中" value="学习中"></el-option>
                        <el-option label="找工作" value="找工作"></el-option>
                        <el-option label="就业" value="就业"></el-option>
                        <el-option label="退款" value="退款"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" class="search-item">
                    <el-select v-model="searchParams.gender" placeholder="请选择性别" clearable>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="search-actions">
                    <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                    <el-button @click="resetSearch" :icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 学生列表表格 -->
        <div class="table-container">
            <el-table :data="studentList" border style="width: 100%" height="calc(100vh - 450px)" v-loading="loading"
                empty-text="暂无数据">
                <el-table-column type="index" label="#" align="center"></el-table-column>
                <el-table-column prop="name" label="学生姓名" align="center"></el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center" width="120">
                    <template #default="scope">
                        {{ formatPhone(scope.row.mobile) }}
                    </template>
                </el-table-column>
                <el-table-column prop="gendervalue" label="性别" align="center"></el-table-column>
                <el-table-column prop="education" label="学历" align="center"></el-table-column>
                <el-table-column prop="city" label="就业城市" align="center">
                    <template #default="scope">
                        {{ getCityName(scope.row.city) }}
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" align="center"></el-table-column>
                <el-table-column prop="remarks" label="备注" align="center" width="200"></el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
                    layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import { cityData } from '../../../data/cityData.js'
import { getWorkList } from '../../../api/class/class.js'

const route = useRoute()
const classItem = ref(route.query.data)
classItem.value = JSON.parse(decodeURIComponent(classItem.value))

const classId = ref(classItem.value.classId)

// 班级信息
const classInfo = reactive({
    className: classItem.value.className,
    teacherName: classItem.value.teacherName,
    startTime: classItem.value.startTime,
    classStatus: classItem.value.classStatus
})

// 搜索参数
const searchParams = reactive({
    name: '',
    state: '',
    gender: '',
    classId: classId.value
})

// 学生列表数据
const studentList = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)


const formatPhone = (phone) => {
    if (!phone || phone.length !== 11) return phone;
    return phone.substring(0, 3) + 'XXXX' + phone.substring(7);
}

// 获取城市名称
const getCityName = (cityCode) => {
    if (!cityCode) return '未知';
    return cityData[cityCode] || cityCode;
};

// 获取学生列表
const fetchStudentData = async () => {
    try {
        loading.value = true
        const params = {
            ...searchParams,
            pageNum: currentPage.value,
            pageSize: pageSize.value
        }

        const response = await getWorkList(params)
        if (response.code === 200) {
            studentList.value = response.rows
            total.value = response.total
        } else {
            ElMessage.error(response.msg || '获取学生数据失败')
        }
    } catch (error) {
        console.error('获取学生数据失败:', error)
        ElMessage.error('获取学生数据失败')
    } finally {
        loading.value = false
    }
}

// 搜索处理
const handleSearch = () => {
    currentPage.value = 1
    fetchStudentData()
}

// 重置搜索
const resetSearch = () => {
    searchParams.name = ''
    searchParams.state = ''
    searchParams.gender = ''
    handleSearch()
}

// 分页处理
const handleSizeChange = (val) => {
    pageSize.value = val
    fetchStudentData()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchStudentData()
}

onMounted(() => {
    fetchStudentData()
})
</script>

<style scoped>
.class-detail-container {
    width: 100%;
    box-sizing: border-box;
}

.header {
    padding: 15px 0;
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
}

.class-info {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.class-info h3 {
    color: #2c3e50;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
}

.class-info-table {
    width: 100%;
    border-collapse: collapse;
}

.class-info-table tr {
    font-size: 12px;
    color: #606266;
}

.class-info-table th {
    text-align: left;
    padding: 6px 10px;
    width: 15%;
    font-weight: 400;
    border: 1px solid #e6ebf5;
    background-color: #f8f9fa;
}

.class-info-table td {
    padding: 6px 10px;
    font-weight: 400;
    border: 1px solid #e6ebf5;
}

.status-learning,
.date-display,
.teacher-name,
.class-name {
    font-weight: 600;
}

.search-area {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.search-item {
    flex: 1;
    min-width: 200px;
}

.search-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.table-container {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}

:deep(.el-table .cell) {
    font-size: 12px;
}
</style>